<template>
  <div>
    <nav-text><span slot="navText">当前位置: 数据中心 > 设置 > 医院设置</span></nav-text>
    <div class="searchBox">
      <div>
        <selectBox>
          <span slot="titleName">大 区 :</span>
          <el-select
            slot="selectBox"
            @change="optionLink"
            v-model="regions"
            clearable
            placeholder="请选择大区"
          >
            <el-option
              v-for="item in regionsOption"
              :key="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </selectBox>
      </div>
      <div>
        <selectBox>
          <span slot="titleName">省 份 :</span>
          <el-select
            @focus="provincesFocus"
            @change="provincesChange($event,regions)"
            slot="selectBox"
            v-model="provinces"
            clearable
            placeholder="请选择省份"
          >
            <el-option
              v-for="item in provincesOption"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </selectBox>
      </div>
      <div>
        <selectBox>
          <span slot="titleName">城 市 :</span>
          <el-select
            @focus="citysFocus"
            slot="selectBox"
            v-model="citys"
            clearable
            placeholder="请选择城市"
          >
            <el-option
              v-for="item in citysOption"
              :key="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </selectBox>
      </div>
      <div class="layoutBtn">
        <div>
          <search-button>
            <el-button
              @click.stop="hospitalSet('1',regions,provinces,citys)"
              slot="searchBtn"
              type="success"
            >搜 索</el-button>
          </search-button>
        </div>
        <div>
          <download-button>
            <el-button
              @click.stop="showAddBox"
              slot="dounloadBtn"
              type="primary"
              icon='el-icon-plus'
              circle
            ></el-button>
          </download-button>
        </div>
      </div>
    </div>
    <!-- 表格数据 -->
    <div class="tableBox">
      <el-table
        :header-cell-style="headStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        border
        :data="tableData"
        :fit="fit"
        :highlight-current-row='highlight'
      >
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dataId"
          label="序 号"
          min-width="40"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dCode"
          label="医 院 I D"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dName"
          label="简 称"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="aNameCode"
          label="大 区"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="pName"
          label="省 份"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="cName"
          label="城 市"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="isUsing"
          label="状 态"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="editTime"
          label="更 新 时 间"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="principal"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              @click.stop="showAlterBox(scope.row)"
              class="el-button-details"
              size="medium "
              type="text"
            >修 改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <pagination>
      <el-pagination
        @current-change="pageNumLink($event,regions,provinces,citys)"
        slot="pagination"
        background
        layout="prev, pager, next, jumper"
        :total="pageTotal"
        :page-size="pageSize"
        hide-on-single-page
      >
      </el-pagination>
    </pagination>
    <!-- 新增数据弹框  isShowAddData-->
    <!-- 组件嵌套开发 baseDataBox为弹框基本框架，包括的li代表每行数据  baseInput为单个输入框，里面包括latle和input-->
    <baseDataBox v-if="isShowAddData">
      <span slot="title">新 增 数 据</span>
      <li slot="content">
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >医院 I D:</label>
            <input
              v-model="addBoxID"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入医院ID"
              type="text"
            />
          </baseInput>
        </div>
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >医院简称:</label>
            <input
              v-model="addBoxShort"
              slot="input"
              class="inputTextStyle"
              placeholder="请输入医院简称"
              type="text"
            />
          </baseInput>
        </div>
      </li>
      <li slot="content">
        <div>
          <whiteSelectBox>
            <span
              class="stateText"
              slot="titleName"
            >所属大区:</span>
            <el-select
              @change="getprovince"
              class="selectBoxStyle"
              slot="selectBox"
              v-model="addBoxArea"
              clearable
              placeholder="请选择所属大区"
            >
              <el-option
                v-for="item in addBoxAreaOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </whiteSelectBox>
        </div>
        <div>
          <whiteSelectBox>
            <span
              class="stateText"
              slot="titleName"
            >所属省份:</span>
            <el-select
              @focus="addBoxprovincesFocus"
              @change="getCity($event,addBoxArea)"
              class="selectBoxStyle"
              slot="selectBox"
              v-model="addBoxProvince"
              clearable
              placeholder="请选择所属省份"
            >
              <el-option
                v-for="item in addBoxProvinceOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </whiteSelectBox>
        </div>
      </li>
      <li slot="content">
        <div>
          <whiteSelectBox>
            <span
              class="stateText"
              slot="titleName"
            >所属城市:</span>
            <el-select
              @focus="getCityList"
              class="selectBoxStyle"
              slot="selectBox"
              v-model="addBoxCity"
              clearable
              placeholder="请选择所属城市"
            >
              <el-option
                v-for="item in addBoxCityOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </whiteSelectBox>
        </div>
        <div>
          <whiteSelectBox>
            <span
              class="stateText"
              slot="titleName"
            >状 态:</span>
            <el-select
              class="selectBoxStyle"
              slot="selectBox"
              v-model="addBoxStatus"
              clearable
              placeholder="请选择状态"
            >
              <el-option
                v-for="item in addBoxStatusOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </whiteSelectBox>
        </div>
      </li>
      <button
        slot="delete"
        @click.stop="cancelAddBox"
      >取 消</button>
      <button
        slot="affirm"
        @click.stop="affirmAddBox"
      >确 认</button>
    </baseDataBox>
    <!-- 修改数据弹窗 isShowAlterData-->
    <baseDataBox v-if="isShowAlterData">
      <span slot="title">修 改 数 据</span>
      <li slot="content">
        <div>
          <baseInput>
            <label
              for=""
              slot="label"
            >医院简称:</label>
            <input
              v-model="alterBoxShort"
              value=""
              slot="input"
              class="inputTextStyle"
              placeholder="请输入医院简称"
              type="text"
            />
          </baseInput>
        </div>
        <div>
        </div>
      </li>
      <li slot="content">
        <div>
          <whiteSelectBox>
            <span
              class="stateText"
              slot="titleName"
            >所属大区:</span>
            <el-select
              @change="getprovince"
              class="selectBoxStyle"
              slot="selectBox"
              v-model="alterBoxArea"
              clearable
              placeholder="请选择所属大区"
            >
              <el-option
                v-for="item in addBoxAreaOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </whiteSelectBox>
        </div>
        <div>
          <whiteSelectBox>
            <span
              class="stateText"
              slot="titleName"
            >所属省份:</span>
            <el-select
              @focus="addBoxprovincesFocus"
              @change="getCity($event,alterBoxArea)"
              class="selectBoxStyle"
              slot="selectBox"
              v-model="alterBoxProvince"
              clearable
              placeholder="请选择所属省份"
            >
              <el-option
                v-for="item in addBoxProvinceOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </whiteSelectBox>
        </div>
      </li>
      <li slot="content">
        <div>
          <whiteSelectBox>
            <span
              class="stateText"
              slot="titleName"
            >所属城市:</span>
            <el-select
              @focus="getCityList"
              class="selectBoxStyle"
              slot="selectBox"
              v-model="alterBoxCity"
              clearable
              placeholder="请选择所属城市"
            >
              <el-option
                v-for="item in addBoxCityOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </whiteSelectBox>
        </div>
        <div>
          <whiteSelectBox>
            <span
              class="stateText"
              slot="titleName"
            >状态:</span>
            <el-select
              class="selectBoxStyle"
              slot="selectBox"
              v-model="alterBoxStatus"
              clearable
              placeholder="请选择状态"
            >
              <el-option
                v-for="item in statusOption"
                :key="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </whiteSelectBox>
        </div>
      </li>
      <button
        slot="delete"
        @click.stop="cancelAlterBox"
      >取 消</button>
      <button
        slot="affirm"
        @click.stop="affirmAlterBox"
      >确 认</button>
    </baseDataBox>
  </div>
</template>

<script>
import whiteSelectBox from "@/components/DataCenter/BaseForm/whiteSelectBox";
import { hospitalSetList } from "@/request/api.js"; //导入登录请求接口api hospitalAlterData
import { hospitalAddData } from "@/request/api.js";
import { hospitalAlterData } from "@/request/api.js";

import navText from "@/components/DataCenter/MyLocation/myLocation";
import textBox from "@/components/DataCenter/BaseForm/textBox";
import searchButton from "@/components/DataCenter/BaseForm/searchBtn";
import downloadButton from "@/components/DataCenter/BaseForm/downloadBtn";
import selectBox from "@/components/DataCenter/BaseForm/selectBox";
import dataSelectBox from "@/components/DataCenter/BaseForm/dateSelectBox";
import pagination from "@/components/baseCpn/pagination.vue";

import baseDataBox from "@/components/DataCenter/BaseForm/baseDataBox";
import baseInput from "@/components/DataCenter/BaseForm/baseInput";
import "@/assets/base/dataCenterTableStyle.css";
export default {
  components: {
    navText,
    textBox,
    searchButton,
    downloadButton,
    selectBox,
    dataSelectBox,
    pagination,
    baseDataBox,
    baseInput,
    whiteSelectBox
  },
  mounted() {
    this.hospitalSet(this.$page);
    this.regionsOption = localStorage.getItem("allArea").split(",");
    this.addBoxAreaOption = localStorage.getItem("allArea").split(",");
  },
  data() {
    return {
      //添加弹框属性
      addBoxID: "",
      addBoxShort: "",
      addBoxArea: "",
      addBoxProvince: "",
      addBoxCity: "",
      addBoxStatus: "",
      addBoxAreaOption: [],
      addBoxProvinceOption: [],
      addBoxCityOption: [],
      addBoxStatusOption: ["启用", "禁用"],
      //修改弹窗属性
      alterBoxArea: "",
      alterBoxProvince: "",
      alterBoxCity: "",
      alterBoxShort: "",
      alterBoxStatus: "",
      hospitalID: null,

      pageTotal: null,
      pageSize: 8,
      isShowAlterData: false,
      isShowAddData: false,
      highlight: true,
      fit: true,
      Status: "",
      statusOption: ["启用", "禁用"],
      headStyle: {
        height: "7rem",
        backgroundColor: "#131428",
        color: "#FFFFFF",
        border: "1px solid #792a4c",
        fontSize: "1.9rem"
      },
      cellStyle: {
        height: "7rem",
        border: "1px solid #792a4c",
        fontSize: "1.8rem"
      },
      tableData: [],
      regions: "",
      provinces: "",
      citys: "",
      regionsOption: [],
      provincesOption: [],
      citysOption: []
    };
  },
  methods: {
    getprovince(e) {
      console.log(e);
      if (e !== "") {
        this.$store.dispatch("areaCityQuest", [e]);
      }
      this.addBoxProvince = "";
      this.addBoxProvinceOption = [];
      this.addBoxCity = "";
      this.addBoxCityOption = [];

      this.alterBoxProvince = "";
      this.alterBoxCity = "";
    },
    addBoxprovincesFocus() {
      this.addBoxProvinceOption = localStorage
        .getItem("allProvince")
        .split(",");
    },
    getCity(e, p) {
      if (e !== "") {
        this.$store.dispatch("areaCityQuest", [p, e]); //本地缓存所有城市
      }
      this.addBoxCity = "";
      this.addBoxCityOption = [];
    },
    getCityList() {
      this.addBoxCityOption = localStorage.getItem("allCity").split(",");
    },
    optionLink(et) {
      if (et !== "") {
        this.$store.dispatch("areaCityQuest", [et]);
      }
      this.provinces = "";
      this.provincesOption = [];
      this.citys = "";
      this.citysOption = [];
    },
    provincesFocus() {
      if (this.regions.length > 0) {
        this.provincesOption = localStorage.getItem("allProvince").split(",");
      }
    },
    provincesChange(pvc, rgs) {
      console.log("et:", pvc, rgs);
      if (pvc !== "") {
        this.$store.dispatch("areaCityQuest", [rgs, pvc]);
      }
      this.citys = "";
      this.citysOption = [];
    },
    citysFocus() {
      if (this.provinces.length > 0) {
        this.citysOption = localStorage.getItem("allCity").split(",");
      }
    },

    pageNumLink(e, aNames, pNames, cNames) {
      let E = String(e);
      if (e) {
        this.hospitalSet(E, aNames, pNames, cNames);
      }
    },
    //医院设置表格接口
    hospitalSet(page, aNames, pNames, cNames) {
      hospitalSetList({
        page: page,
        pageSize: this.$pageSize,
        aName: aNames,
        pName: pNames,
        cName: cNames
      })
        .then(res => {
          console.log("医院设置表格请求成功", res);
          if (res.data.success) {
            this.tableData = res.data.rows;
            // 表格序号内容
            this.pageTotal = res.data.total;
            let pages = (page - 1) * res.data.rowcount; //1--0,2--8,3--16,4--24
            for (var i = 0; i < res.data.rowcount; i++) {
              var k = (page - 1) * 8 + i + 1;
              this.tableData[i].dataId = k;
            }
          } else {
            this.$message.error({
              message: res.data.errorMsg
            });
          }
        })
        .catch(err => {
          console.log("医院设置表格请求失败", err);
        });
    },
    showAlterBox(e) {
      this.isShowAlterData = true;
      console.log(e);
      this.alterBoxShort = e.dName;
      this.alterBoxStatus = e.isUsing;
      this.alterBoxArea = e.aNameCode;
      this.alterBoxProvince = e.pName;
      this.alterBoxCity = e.cName;
      this.hospitalID = e.id;
    },
    showAddBox() {
      this.isShowAddData = true;
    },
    cancelAlterBox() {
      this.isShowAlterData = false;
    },
    affirmAlterBox() {
      this.isShowAlterData = false;
      //医院设置-修改数据接口
      hospitalAlterData({
        id: this.hospitalID,
        dName: this.alterBoxShort,
        aCode: this.alterBoxArea,
        pCode: this.alterBoxProvince,
        cCode: this.alterBoxCity,
        isUsing: this.alterBoxStatus == "启用" ? "1" : "0"
      })
        .then(res => {
          console.log("修改数据成功！", res);
          this.hospitalSet(this.$page);
          if (res.data.success) {
            this.$message.success({
              message: "修改数据成功"
            });
          } else {
            this.$message.error({
              message: res.data.errorMsg
            });
          }
        })
        .catch(err => {
          console.log("修改数据失败！", err);
        });
    },
    cancelAddBox() {
      this.isShowAddData = false;
    },
    affirmAddBox() {
      console.log("触发了");
      this.isShowAddData = false;
      //医院设置-添加数据接口
      hospitalAddData({
        code: this.addBoxID, //中心编码
        name: this.addBoxShort, //中心简称
        aCode: this.addBoxArea,
        pCode: this.addBoxProvince,
        cCode: this.addBoxCity,
        isUsing: this.addBoxStatus == "启用" ? "1" : "0"
      })
        .then(res => {
          this.hospitalSet(this.$page);
          if (res.data.success) {
            this.$message.success({
              message: "新增数据成功"
            });
          } else {
            this.$message.error({
              message: this.$message.errorMsg
            });
          }
          console.log("添加数据成功！", res);
        })
        .catch(err => {
          console.log("添加数据失败！", err);
        });
    },
    rowStyle(row) {
      if (row.rowIndex % 2 === 0) {
        return { backgroundColor: "#222644" };
      } else if (row.rowindex % 2 === 1) {
        return { backgroundColor: "#262b4b" };
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.searchBox {
  width: 100%;
  height: 16rem;
  display: flex;
  div {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .layoutBtn {
    display: flex;
    flex-direction: row;
    div {
      flex: 1;
      display: flex;
    }
  }
}
.tableBox {
  width: 95%;
  height: 63.5rem;
  margin: 0 auto;
  padding-top: 2rem;
  overflow: hidden;
  .el-button-details {
    font-size: 1.6rem;
    color: #33ffff;
  }
}
</style>